import React, { useState } from 'react'
import { Button, InputComponent, Dropdown } from '../../componet/index'
import './Home.scss'
export default function Home() {
  const [list, setList] = useState<any>([
    { name: "组织管理", path: "/" },
    { name: "民生服务", path: "/" },
    { name: "通知公告", path: "/" },
    { name: "工作记录", path: "/" },
    { name: "网格区域", path: "/" },
    { name: "网格员管理", path: "/" },
    { name: "居民档案", path: "/" },
    { name: "网格地图", path: "/" },
    { name: "党员管理", path: "/" },
    { name: "三会一课", path: "/" },
  ])

  return (
    <div>
      <div className="homebox">
        <div className="homeone">
          <p className='homeone-title'>XXXXXX镇</p>
          <p className='homeone-p1'>您好，admin</p>
          <p className='homeone-p2'>欢迎使用数字乡镇平台</p>
        </div>
        <div className="hometwo">
          <div className="hometwo-left">
            <div className="hometwo-left-top">
              <p className='hometwo-left-top-p1'>用户统计</p>
            </div>
            <div className="hometwo-left-bottom">

              <div className="hometwo-left-bottom-one">
                <div className="hometwo-left-bottom-box1">
                  <img src="/icon/lv.png" alt="" className='hometwo-left-bottom-box1-img' />
                  <div className='hometwo-left-bottom-box1-pbox'>
                    <p className='hometwo-left-bottom-box1-pbox-p1'>用户数量</p>
                    <p className='hometwo-left-bottom-box1-pbox-p2'>1234</p>
                  </div>
                </div>
                <div className="hometwo-left-bottom-box1">
                  <img src="/icon/lan.png" alt="" className='hometwo-left-bottom-box1-img' />
                  <div className='hometwo-left-bottom-box1-pbox'>
                    <p className='hometwo-left-bottom-box1-pbox-p1'>今日登录量</p>
                    <p className='hometwo-left-bottom-box1-pbox-p2'>1234</p>
                  </div>
                </div>
              </div>
              <div className="hometwo-left-bottom-two">
                <img src="/icon/red.png" alt="" className='hometwo-left-bottom-two-img' />
                <div className='hometwo-left-bottom-two-pbox'>
                  <p className='hometwo-left-bottom-two-pbox-p1'>党组织</p>
                  <p className='hometwo-left-bottom-two-pbox-p2'>2</p>
                  <p className='hometwo-left-bottom-two-pbox-p1'>党员数量</p>
                  <p className='hometwo-left-bottom-two-pbox-p2'>233</p>
                </div>
              </div>
            </div>
          </div>
          <div className="hometwo-right">
            <div className="hometwo-right-top">
              <p className='hometwo-right-top-p1'>常用入口</p>
              <img src="/icon/rk.png" alt="" className='hometwo-right-top-img' />
            </div>
            <div className="hometwo-right-bottom">
              {list.map((item: any, index: number) => {
                return <div className="hometwo-right-bottom-box">
                  <p className='hometwo-right-bottom-box-p1'>{item.name}</p>
                </div>
              })
              }
            </div>
          </div>
        </div>
        <div className="homethree">
          <div className="homethree-right-top">
            <p className='homethree-right-top-p1'>常用入口</p>
          </div>
          <div className="homethree-right-bottom">
            <div className="homethree-right-bottom-box">
              <div className="homethree-right-bottom-box-left">
              <p className='homethree-right-bottom-box-p1'>事务公开</p>
              <p className='homethree-right-bottom-box-p2'>开展 “五社联动聚合力 社工服务暖基层” 宣传活动</p>
              </div>
              <div className="homethree-right-bottom-box-right">
                <p className='homethree-right-bottom-box-right-p1'>2023-9-13 10:00:00</p>
                <img src="/icon/right.png" className='homethree-right-bottom-box-right-img' alt="" />
              </div>
            </div>
            <div className="homethree-right-bottom-box">
              <div className="homethree-right-bottom-box-left">
              <p className='homethree-right-bottom-box-p1'>事务公开</p>
              <p className='homethree-right-bottom-box-p2'>开展 “五社联动聚合力 社工服务暖基层” 宣传活动</p>
              </div>
              <div className="homethree-right-bottom-box-right">
                <p className='homethree-right-bottom-box-right-p1'>2023-9-13 10:00:00</p>
                <img src="/icon/right.png" className='homethree-right-bottom-box-right-img' alt="" />
              </div>
            </div>
            <div className="homethree-right-bottom-box">
              <div className="homethree-right-bottom-box-left">
              <p className='homethree-right-bottom-box-p1'>事务公开</p>
              <p className='homethree-right-bottom-box-p2'>开展 “五社联动聚合力 社工服务暖基层” 宣传活动</p>
              </div>
              <div className="homethree-right-bottom-box-right">
                <p className='homethree-right-bottom-box-right-p1'>2023-9-13 10:00:00</p>
                <img src="/icon/right.png" className='homethree-right-bottom-box-right-img' alt="" />
              </div>
            </div>
            <div className="homethree-right-bottom-box">
              <div className="homethree-right-bottom-box-left">
              <p className='homethree-right-bottom-box-p1'>事务公开</p>
              <p className='homethree-right-bottom-box-p2'>开展 “五社联动聚合力 社工服务暖基层” 宣传活动</p>
              </div>
              <div className="homethree-right-bottom-box-right">
                <p className='homethree-right-bottom-box-right-p1'>2023-9-13 10:00:00</p>
                <img src="/icon/right.png" className='homethree-right-bottom-box-right-img' alt="" />
              </div>
            </div>
            <div className="homethree-right-bottom-box">
              <div className="homethree-right-bottom-box-left">
              <p className='homethree-right-bottom-box-p1'>事务公开</p>
              <p className='homethree-right-bottom-box-p2'>开展 “五社联动聚合力 社工服务暖基层” 宣传活动</p>
              </div>
              <div className="homethree-right-bottom-box-right">
                <p className='homethree-right-bottom-box-right-p1'>2023-9-13 10:00:00</p>
                <img src="/icon/right.png" className='homethree-right-bottom-box-right-img' alt="" />
              </div>
            </div>
            <div className="homethree-right-bottom-box">
              <div className="homethree-right-bottom-box-left">
              <p className='homethree-right-bottom-box-p1'>事务公开</p>
              <p className='homethree-right-bottom-box-p2'>开展 “五社联动聚合力 社工服务暖基层” 宣传活动</p>
              </div>
              <div className="homethree-right-bottom-box-right">
                <p className='homethree-right-bottom-box-right-p1'>2023-9-13 10:00:00</p>
                <img src="/icon/right.png" className='homethree-right-bottom-box-right-img' alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )

}

